<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta name="author" content="王晨阳">
        <title>小米商城-首页</title>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="css/base.css">
        <link rel="stylesheet" href="css/home.css">
    </head>
    <body>
        <main onscroll="changeColor()">
            <!--1.app广告-->
            <div class="app">
                <img src="img/app.png" alt="">
                <span class="close-app"></span>
            </div>

            <!--2.搜索工具条-->
            <div class="header-wrapper" id="search-header">
                <img class="logo left-item" src="img/logo_mi.png" alt="">
                <a href="" class="search-bar center-item">
                    <span class="glyphicon glyphicon-search"></span>
                    <span>搜索商品名称</span>
                </a>
                <a href="" class="login right-itme">登陆</a>
            </div>

            <!--3.轮播图-->
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="1500">
              <!-- Indicators -->
              <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
              </ol>
          
              <!-- Wrapper for slides -->
              <div class="carousel-inner" role="listbox">
                <div class="item active">
                  <img src="img/carousel-01.jpg" alt="...">
                </div>
                <div class="item">
                  <img src="img/carousel-02.jpg" alt="...">
                </div>
              </div>
            </div>

            <!--4.内容-->
            <div class="content-wrapper">
              <!--4-1.商城早报-->
              <div class="first">
                <section class="hot-header">
                  <a href="" class="news-header"><img src="img/news.png" alt=""></a>
                  <a href="" class="news-list">小米电视4s与3s比较。。。</a>
                </section>
                <section class="blank-gray"></section>
                <section class="hot-pro clearfix">
                  <div class="left-pro">
                    <a href=""><img src="img/hot-01.jpg" alt=""></a>
                  </div>
                  <div class="right-pro">
                    <a href=""><img src="img/hot-02.jpg" alt=""></a>
                    <a href=""><img src="img/hot-03.jpg" alt=""></a>
                  </div>
                </section>
              </div><!--firstEnd-->

              <!--4-2.明星单品-->
              <div class="second">
                <section class="blank-gray"></section>
                <div class="pro-banner">
                  <img src="img/banner-01.jpg" alt="">
                </div>
                <section class="blank-gray"></section>
                <div class="pro-banner">
                  <img src="img/starPro-01.jpg" alt="">
                </div>
                <div class="pro-menu">
                  <a href="">
                    <figure>
                      <img src="img/straPro-02.jpg" alt="">
                      <figcaption>
                        <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                      </figcaption>
                    </figure>
                  </a>

                  <a href="">
                    <figure>
                      <img src="img/starPro-03.jpg" alt="">
                      <figcaption>
                        <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                      </figcaption>
                    </figure>
                  </a>

                  <a href="">
                    <figure>
                      <img src="img/straPro-04.jpg" alt="">
                      <figcaption>
                        <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                      </figcaption>
                    </figure>
                  </a>

                  <a href="">
                    <figure>
                      <img src="img/straPro-05.jpg" alt="">
                      <figcaption>
                        <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                      </figcaption>
                    </figure>
                  </a>

                  <a href="">
                    <figure>
                      <img src="img/straPro-06.jpg" alt="">
                      <figcaption>
                        <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                      </figcaption>
                    </figure>
                  </a>

                  <a href="">
                    <figure>
                      <img src="img/straPro-07.jpg" alt="">
                      <figcaption>
                        <h4>红米NOTE</h4>
                        <h5>多彩金属 超长续航</h5>
                        <h6>￥999</h6>
                      </figcaption>
                    </figure>
                  </a>
                </div>
              </div><!--secondEnd-->
              
            </div>


        </main>
        <script src="bootstrap/js/jquery.min.js"></script>
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="js/home.js"></script>
    </body>
</html>